<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="Author" content="setycyas">
  <link rel="stylesheet" href="../bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="../style.css" type="text/css" />
  <script src="../jquery.min.js"></script>
  <script src="../bootstrap.min.js"></script>
  <title>我的网页笔记本</title>
  <script src="class/note.js"></script>
  <script>
  /* Define global variables */
  //笔记类
  var myNote=note("myNote");
  //当前笔记名
  var currentKey='';
  //最近一次的笔记内容,判断笔记是否有改变,如有改变但没有保存则换笔记前需要确认.
  var lastNote='';  
  /* Define methods */
  //设置当前笔记名,并进行对应操作,成功返回true
  function setKey(key){
    var lastKey=currentKey;
    if(key){
      if((lastKey) && (lastNote!=$('#text').val())){
        if(!confirm('当前笔记尚未保存,确定更换?')){
          var sel=document.getElementById('asideSel');
          sel.value=lastKey;
          return false;
        }
      }
      $('#noteKey').html(key);
      $('#text').val(myNote.getValue(key));
      lastNote=$('#text').val();
    }else{
      $('#noteKey').html('未选择笔记');
      $('#text').val('');
    }
    currentKey=key;
    return true;
  }

  //更新侧边栏
  function refreshAside(){
    var newHtml='';
    var keyList=myNote.getKeyList();
    for(var i=0;i<keyList.length;i++){
        var key=keyList[i];
        newHtml+='<option value="'+key+'">'+key+'</option>;'
    }
    newHtml+='';
    $("#asideSel").html(newHtml);
  }

  //选择一个默认笔记,一般在删除之类的操作之后做,或onLoad当中
  function defaultChoose(){
    if($('#asideSel option').size()>0){
      setKey($('#asideSel option').eq(0).val());
      $('#asideSel').val($('#asideSel option').eq(0).val());
    }else{
      setKey('');
    }
  }

  /* Reply for html elements */
  function onLoad(){
    refreshAside();
    $('#text').val('');
    defaultChoose();
  }

  //导入json字符串
  function addJson(){
    if(!confirm('将把文本框的字符串json导入,OK?')){
        return;
    }
    var newJson;
    try{
        newJson=JSON.parse($('#text').val());
    }catch(e){
        alert('json字符串不正确!');
        return;
    }
    if(!setKey('')){
        return;
    }
    myNote.addJson(newJson);
    refreshAside();
  }
  
  //显示整个笔记本的json字符串
  function getJson(){
    if(setKey('')){
        $('#text').val(myNote.toJson());
    }
  }

  //保存笔记更新
  function saveNote(){
    if(!currentKey){
        alert('未选择笔记!');
        return;
    }
    if(!confirm('当前笔记是'+currentKey+",保存修改吗?")){
        return;
    }
    myNote.newNote(currentKey,$('#text').val());
    lastNote=$('#text').val();
  }

  //删除所有笔记
  function delAll(){
    var inputConfirm=prompt('删除所有笔记!慎重!手动输入字符串delAll确认!','');
    if (inputConfirm=='delAll'){
      myNote.clear();
      refreshAside();
      setKey('');
    }
  }

  //删除当前笔记
  function delNote(){
    if(currentKey.length==0){
      alert('未选择笔记!');
      return;
    }
    var warnText='当前笔记是'+currentKey+',要删除吗?';
    if(confirm(warnText)){
      myNote.delNote(currentKey);
      setKey('');
      refreshAside();
      defaultChoose();
    }
  }

  //新建笔记
  function newNote(){
    var keyList=myNote.getKeyList();
    var title=prompt('输入新建的笔记名称','第'+(keyList.length+1)+'个笔记');
    for(var i=0;i<keyList.length;i++){
      if(title==keyList[i]){
        alert('笔记已存在!');
          return;
      }
    }
    if(title.length>0){
      myNote.newNote(title,title);
      setKey(title);
      refreshAside();
    }
  }

  //改变选择的当前笔记
  function changeSelNote(){
    var newKey=$("#asideSel").val()+"";
    setKey(newKey);
  }

  //在文本光标位置插入日期
  function insertTime(){
    var newDate=new Date();
    var timeStr='\n============================================================\n';
    timeStr+='[localeTime = '+newDate.toLocaleString()+']\n[TITLE = ]\n';
    var oldText=$('#text').val();
    var textarea=document.getElementById('text');
    var newText=oldText.substr(0,textarea.selectionEnd)+timeStr+oldText.substr(textarea.selectionEnd)
    newText=newText.replace(' 上午','_AM').replace(' 下午','_PM');
    $('#text').val(newText);
  }
  </script>
  <style>
  
  </style>
</head>

<body onLoad="onLoad();">
<section id='main' class='container'>

<aside style="width:250px;display:block;float:left;margin=5px;">
  <br/><br/><br/><br/>
    <select id="asideSel" multiple="multiple" size="15" class="form-control"  
      onchange="changeSelNote()" style="width:200px;border:1px solid green"></select> 
    <br/><br/>
    <button class='btn btn-primary' onClick="newNote();">新建笔记</button><br/><br/>
    <button class='btn btn-danger' onClick="delNote();">删除当前笔记</button><br/><br/>
    <button class='btn btn-danger' onClick="delAll();">删除所有笔记</button>
</aside>

<article style="width:800px;display:block;float:left">
    <h2 id='noteKey'>未选择笔记</h2><br/>
    <textarea id="text" class="form-control" 
      style="width:800px;height:300px;border:1px solid green;"></textarea><br/><br/>
    <button class='btn btn-primary' onClick="saveNote();">更新笔记</button>
    <button class='btn btn-primary' onClick="getJson();">导出笔记</button>
    <button class='btn btn-danger' onClick="addJson();">导入笔记</button>
    <button class='btn btn-default' onClick="insertTime();">插入日期</button>
</article>

</section>
</body>
</html>